<template>
    <div id="cesiumContainer" ref="cesiumContainer"></div>
  </template>
  
  <script setup>
  // yarn add cesium
  // 将cesium目录下的Build/Cesium4个目录拷贝到public，然后将widgets目录拷贝一份到src下
  import * as Cesium from "cesium";
  import "./Widgets/widgets.css";
  import { onMounted } from "vue";
  import planeData from "@/assets/json/plane.json";
  // 设置cesium token
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZjJlYTllMy1kYWRiLTQwYjctOGZhOS02NGJkOTJhYTA1ODUiLCJpZCI6MjU5LCJpYXQiOjE3Mjc3OTI2NzB9.XbfI79d1v3T5OpMl4CznrcBuctSfW1lycPWlt8bq_1A";
  
  // 设置cesium静态资源路径
  window.CESIUM_BASE_URL = "/";
  
  // 设置cesium默认视角
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    // 西边的经度
    89.5,
    // 南边维度
    20.4,
    // 东边经度
    110.4,
    // 北边维度
    61.2
  );
  
  onMounted(async () => {
    var viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: await Cesium.createWorldTerrainAsync({
        requestWaterMask: true,
        requestVertexNormals: true,
      }),
      shouldAnimate: true,
    });
  
    // 隐藏logo
    viewer.cesiumWidget.creditContainer.style.display = "none";
  
    // 添加3d建筑
    // let tiles3d = await Cesium.createOsmBuildingsAsync()
    // const osmBuildings = viewer.scene.primitives.add(tiles3d)
  
    const positionProperty = new Cesium.SampledPositionProperty()
    // 时间间隔30秒
    const timeStepInSeconds = 30
    // 整个飞行花费的时间
    const totalSeconds = (planeData.length - 1) * timeStepInSeconds
  
    // 设置起点时间
    const time = new Date('2022-03-09T23:10:00Z')
  
    // cesium默认使用的是儒略日的时间
    // 所以需要起点时间转换成儒略日时间
    const startJulianDate = Cesium.JulianDate.fromDate(time)
    // 设置终点时间
    const stopJulianDate = Cesium.JulianDate.addSeconds(
      startJulianDate,
      totalSeconds,
      new Cesium.JulianDate()
    )
  
    // 将查看器的时间调整到起点和结束点的范围
    viewer.clock.startTime = startJulianDate.clone()
    viewer.clock.stopTime = stopJulianDate.clone()
    viewer.clock.currentTime = startJulianDate.clone()
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
    viewer.timeline.zoomTo(startJulianDate, stopJulianDate)
  
    planeData.forEach((dataPoint, i) => {
      // 当前点的时间
      const time = Cesium.JulianDate.addSeconds(
        startJulianDate,
        i * timeStepInSeconds,
        new Cesium.JulianDate()
      )
      // 设置当前点的位置
      const position = Cesium.Cartesian3.fromDegrees(
        dataPoint.longitude,
        dataPoint.latitude,
        dataPoint.height
      )
      // 添加轨迹采样点
      positionProperty.addSample(time, position)
  
      // 添加点
      viewer.entities.add({
        position,
        point: {
          pixelSize: 5,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 1,
        }
      })
    })
  
    console.log(positionProperty)
  
    // 创建飞机
    const planeEntity = viewer.entities.add({
      availability: new Cesium.TimeIntervalCollection([
        new Cesium.TimeInterval({
          start: startJulianDate,
          stop: stopJulianDate
        })
      ]),
      name: '飞机',
      // 设置飞机的可用
      position: positionProperty,
      // VelocityOrientationProperty会自动根据采样点, 计算出飞机的速度和方向
      orientation: new Cesium.VelocityOrientationProperty(positionProperty),
      model: {
        uri: './model/Air.glb',
        minimumPixelSize: 128
      },
      // 绘制轨迹
      path: new Cesium.PathGraphics({
        width: 5,
        minimumPixelSize: 12800,
      })
    })
  
    // 相机追踪运动的问题
    // viewer.trackedEntity = planeEntity;
  
  });
  </script>
  
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  #cesiumContainer {
    width: 100vw;
    height: 100vh;
  }
  </style>
  